import React, {Component} from 'react';
import {Popup, Tab,Button,Group,Field ,NumberPicker } from 'saltui';
import Number from  './Number'

/**
 *  <EditPrice room submitClick cancelClick buttonName >
 */
export default class EditPrice extends React.Component {
  constructor(props) {

    super(props);
    this.state = {
      prices :[]
    };
    this.state.room = this.props.room
    this.state.submitClick = this.props.submitClick
    this.state.cancelClick  = this.props.cancelClick;
    this.state.buttonName = this.props.buttonName;
  }

  onChange = (id,value) =>{
    let prices = this.state.prices;
    prices[id] = {
      id:id,
      price:value
    }
    this.setState({prices:prices})
    console.info(prices);
  }


  render() {
    let that = this;
    return  <Button type="secondary"  size="small" onClick={() => {
        Popup.show(<div className="demo-popup-container">
            <Group.List >
              {
                this.state.room.map((room,index) =>(
                  <Field label={room.name} key={index} >
                    <div>
                      <Number value={room.number} id = {room.id} onChange={that.onChange} ></Number>
                    </div>
                  </Field>
                ))
              }
            </Group.List>
            <div className="demo-line">
              <Button type="secondary"  size="small" onClick={this.state.submitClick}  >提交</Button>
              <Button type="secondary"  size="small" onClick={this.state.cancelClick}  >取消</Button>
            </div>
         </div>, {
          animationType: 'slide-down',
        });
      }}>{this.state.buttonName}</Button>
    }
  }

